<template>
  <div class="tm-color-range">

  </div>
</template>

<script>
export default {
  name: 'tm-color-range',
  cnName: '渐变颜色选择器',
  props: {
    value: String,
    colorTypeOption: {
      type: String,
      default: 'single,linear-gradient,radial-gradient'
    }
  },
  data() {
    return {}
  },
  methods: {
    init() {
      const el = this.$el
      // eslint-disable-next-line no-undef
      this.xncolorpicker = new XNColorPicker({
        // color: "linear-gradient(0.0deg,hsla(279,63%,58%,1) 0.0,hsla(198,83%,53%,1) 100.0%)",
        color: this.value,
        selector: el,
        showprecolor: true,// 显示预制颜色
        prevcolors: null,// 预制颜色，不设置则默认
        showhistorycolor: true,// 显示历史
        historycolornum: 16,// 历史条数
        format: 'rgba',// rgba hex hsla,初始颜色类型
        showPalette: true,// 显示色盘
        show: false, // 初始化显示
        lang: 'cn',// cn 、en
        colorTypeOption: this.colorTypeOption,
        canMove: false,// 选择器位置是否可以拖拽
        alwaysShow: false,
        autoConfirm: false,
        onError: () =>{
        },
        onCancel: () => {
        },
        onChange: (color) => {
          this.emit(color)
        },
        onConfirm: (color) => {
          this.emit(color)
          this.$emit('confirm', color)
        }
      })
    },
    emit(color) {
      let val = color.color.str
      if(color.colorType === 'single') {
        val = color.color.rgba
      }
      this.$emit('input', val)
      this.$emit('change', color)
    }
  },
  beforeDestroy() {
    if(this.xncolorpicker) {
      this.xncolorpicker = null
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.tm-color-range {
  display: inline-block;
}
</style>
